package myJs.admin

import myJs.assets
import myJs.cps.{Display, JustifyContent, Style, TextAlign}
import myJs.myPkg.{NavigateOptions, ReactRouterDOM}
import org.scalajs.dom.window.localStorage
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.web.html._

import scala.scalajs.js

/**
 * Created by yz on 22/4/2022
 */
@react object HeaderCp {

  type Props = Unit

  val component = FunctionalComponent[Props] { props =>

    val navigate = ReactRouterDOM.useNavigate()

    val account=localStorage.getItem("account")

    object FTool{

      def logout=()=>{
        localStorage.clear()
        navigate("/",options = NavigateOptions(state = js.Dictionary("message"->"退出登录成功！")))
      }

    }

    div(className := "page-header navbar",
      div(style:=Style(width = "100%",display = Display.flex,justifyContent = JustifyContent.`space-between`),className := "page-header-inner",
        div(className := "page-logo",
          div(
            h2(style := Style(textAlign = TextAlign.center, marginTop = "15px", fontSize = "15px", color = "#484848"),
              img(style := Style(height = "30px"), src := assets.PandaLogo1Png.asInstanceOf[String]),
              " 样本管理系统"
            )
          )
        ),
        div(className := "top-menu",
          ul(className := "nav navbar-nav pull-right",
            li(className := "dropdown dropdown-user",
              a(className := "dropdown-toggle", data - "toggle" := "dropdown", data - "hover" := "dropdown",
                data - "close-others" := "true",
                span(className:="username username-hide-on-mobile",
                  account
                ),
                i(className:="fa fa-angle-down")
              ),
              ul(className:="dropdown-menu",
                li(
                  a(onClick:=FTool.logout,
                    i(className:="fa fa-user"),
                    " 退出登录"
                  )
                )
              )
            )
          )
        )
      )
    )

  }

}
